<template>
  <div class="warpper-box">
    <a-form layout="inline">
      <a-form-item label="日期范围">
        <a-range-picker v-model="rangeDate" @change="rangeChange" valueFormat="YYYY-MM-DD"></a-range-picker>
      </a-form-item>
      <a-form-item label="标题">
        <a-input placeholder="请输入标题" v-model="params.title"></a-input>
      </a-form-item>
      <a-form-item>
        <a-button type="primary" icon="search" @click="getPolicyList(true)">搜索</a-button>
        <a-button type="primary" icon="setting" @click="reset()">重置</a-button>
        <a-button type='primary' v-action:addPolicycode icon="plus" @click="$refs.addInfo.add(policyTypeList)">新增社保政策</a-button>
      </a-form-item>
    </a-form>
    <a-tabs type="card" @change="callback" style="margin-top: 15px;">
      <a-tab-pane v-for="item in policyTypeList" :key="item.key" :tab="item.value"></a-tab-pane>
    </a-tabs>
    <a-list :data-source="policyList" style="padding: 0 30px;">
      <a-list-item slot="renderItem" slot-scope="item">
        <a-row style="width: 100%;">
          <a-col :span="12">
            <span style="text-decoration: underline;color: #02A7F0;cursor: pointer;" @click="goDetail(item)">{{ item.title
            }}</span>
          </a-col>
          <a-col :span="4" style="color: #666;">
            {{ item.createdDate }}
          </a-col>
          <a-col :span="8">
            <a @click="$refs.addInfo.add(policyTypeList, item.policyId)" v-action:editorialPolicycode>编辑</a>
            <a-divider type="vertical" v-action:deletionPolicycode/>
            <a-popconfirm v-action:deletionPolicycode title="确认删除？" ok-text="确认" cancel-text="取消" @confirm="delOrder(item.policyId)">
              <a>删除</a>
            </a-popconfirm>
          </a-col>
        </a-row>
      </a-list-item>
    </a-list>
    <a-pagination style="text-align: right;margin: 20px 0;" :default-current="1" :total="total" @change="pageChange" />

    <add-info ref="addInfo" @on-ok="reset"></add-info>
  </div>
</template>

<script>
import moment from 'moment'
import {
  listHrPolicyType,
  pagePolicy,
  policyDelete
} from "@/api/human/park"
import AddInfo from "./policy_add.vue"
export default {
  name: 'policyList',
  components: {
    AddInfo
  },
  data() {
    return {
      params: {
        pageNum: 1,
        pageSize: 10,
        title: '',
        type: '1',
        startDate: '',
        endDate: ''
      },
      policyTypeList: [], // 政策库类型
      policyList: [], // 政策库列表
      total: 0,

      rangeDate: [], // 日期范围
    }
  },
  mounted() {

  },
  activated() {
    this.getPolicyType();
    this.getPolicyList(true);
  },
  methods: {
    rangeChange(e) {
      this.params.startDate = e[0];
      this.params.endDate = e[1];
    },
    callback(key) {
      this.params.type = key;
      this.getPolicyList(true);
    },
    // 获取政策库类型
    async getPolicyType() {
      const { code, data } = await listHrPolicyType();
      if (code === '1') {
        this.policyTypeList = data
      }
    },
    // 获取政策库列表
    async getPolicyList(flag) {
      let params = this.params;
      if (flag) {
        this.params.pageNum = 1;
        this.params.pageSize = 10;
      }
      const { code, data } = await pagePolicy(params);
      if (code === '1') {
        this.policyList = data.content
        this.total = data.total
      }
    },
    pageChange(current, pageSize) {
      this.params.pageNum = current;
      this.params.pageSize = pageSize;
      this.getPolicyList(false);
    },
    // 跳转详情
    goDetail(row) {
      this.$router.push({ name: 'humanResourcesPolicyDetailCode', query: { policyId: row.policyId } });
    },
    // 删除
    async delOrder(Id) {
      let {
        code
      } = await policyDelete({ policyId: Id });
      if (code === '1') {
        this.$message.success('删除成功');
        this.getPolicyList();
      }
    },
    // 重置
    reset() {
      this.params.title = '';
      this.params.startDate = '';
      this.params.endDate = '';
      this.rangeDate = [];
      this.getPolicyList(true);
    },
  }
}
</script>
